<template>
	<div class="roaddisinfo-container">
		<el-dialog v-model="isShowDialog" :width="800" draggable="">
			<template #header>
				<div style="color: #fff">
					<!--<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit /> </el-icon>-->
					<span>{{ props.title }}</span>
				</div>
			</template>
			<el-form :model="ruleForm" ref="ruleFormRef" label-width="auto" :rules="rules">
				<el-row :gutter="35">
					<el-form-item v-show="false">
						<el-input v-model="ruleForm.id" />
					</el-form-item>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="道理名称" prop="name">
							<el-input v-model="ruleForm.name" placeholder="请输入" maxlength="32" show-word-limit clearable />

						</el-form-item>

					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="报告时间" prop="reportDate">
							<el-input v-model="ruleForm.reportDate" placeholder="请输入" maxlength="0" show-word-limit clearable />

						</el-form-item>

					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="病害类型" prop="disType">
							<el-input v-model="ruleForm.disType" placeholder="请输入" maxlength="32" show-word-limit clearable />

						</el-form-item>

					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="病害编号" prop="disNo">
							<el-input v-model="ruleForm.disNo" placeholder="请输入" maxlength="32" show-word-limit clearable />

						</el-form-item>

					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="平面范围" prop="size">
							<el-input v-model="ruleForm.size" placeholder="请输入" maxlength="32" show-word-limit clearable />

						</el-form-item>

					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="风险等级" prop="fxlevel">
							<el-input v-model="ruleForm.fxlevel" placeholder="请输入" maxlength="32" show-word-limit clearable />

						</el-form-item>

					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="垂向范围" prop="yarea">
							<el-input v-model="ruleForm.yarea" placeholder="请输入" maxlength="32" show-word-limit clearable />

						</el-form-item>

					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="伟度" prop="latitude">
							<el-input v-model="ruleForm.latitude" placeholder="请输入" maxlength="32" show-word-limit clearable />

						</el-form-item>

					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="经度" prop="longitude">
							<el-input v-model="ruleForm.longitude" placeholder="请输入" maxlength="32" show-word-limit clearable />

						</el-form-item>

					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="影响面积" prop="yxmj">
							<el-input v-model="ruleForm.yxmj" placeholder="请输入" maxlength="32" show-word-limit clearable />

						</el-form-item>

					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="位置描述" prop="location_name">
							<el-input v-model="ruleForm.location_name" placeholder="请输入" maxlength="32" show-word-limit clearable />

						</el-form-item>

					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="地表描述" prop="location_name">
							<el-input v-model="ruleForm.dbms" placeholder="请输入" maxlength="32" show-word-limit clearable />

						</el-form-item>

					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="成因分析" prop="location_name">
							<el-input v-model="ruleForm.cyfx" placeholder="请输入" maxlength="32" show-word-limit clearable />

						</el-form-item>

					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="处置建议" prop="location_name">
							<el-input v-model="ruleForm.czjy" placeholder="请输入" maxlength="32" show-word-limit clearable />

						</el-form-item>

					</el-col>


					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="" prop="leidaimage">
							<template #default="scope">
								<el-button icon="ele-Edit" size="small" text type="primary"    @click="openUploadDialog(1)" > 上传雷达图谱 </el-button>

								<el-image
										v-if="state.leidaimagesrc"
										style="width: 60px; height: 60px"
										:src="state.leidaimagesrc"
										alt="无法预览"
										:lazy="true"
										:hide-on-click-modal="true"
										:preview-src-list="[state.leidaimagesrc]"
										:initial-index="0"
										fit="scale-down"
										preview-teleported
								>
									<template #error> </template>
								</el-image>
							</template>
						</el-form-item>

					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="" prop="qpimge">
							<template #default="scope">
								<el-button icon="ele-Edit" size="small" text type="primary"    @click="openUploadDialog(2)" > 上传水平切片 </el-button>
								<el-image
										v-if="state.qpimgesrc"
										style="width: 60px; height: 60px"
										:src="state.qpimgesrc"
										alt="无法预览"
										:lazy="true"
										:hide-on-click-modal="true"
										:preview-src-list="[state.qpimgesrc]"
										:initial-index="0"
										fit="scale-down"
										preview-teleported
								>
									<template #error> </template>
								</el-image>
							</template>
						</el-form-item>

					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="" prop="xcimage">
							<template #default="scope">
								<el-button icon="ele-Edit" size="small" text type="primary"   @click="openUploadDialog(3)" > 上传隐患点现场图片 </el-button>
								<el-image
										v-if="state.xcimagesrc"
										style="width: 60px; height: 60px"
										:src="state.xcimagesrc"
										alt="无法预览"
										:lazy="true"
										:hide-on-click-modal="true"
										:preview-src-list="[state.xcimagesrc]"
										:initial-index="0"
										fit="scale-down"
										preview-teleported
								>
									<template #error> </template>
								</el-image>
							</template>
						</el-form-item>

					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="" prop="yjimage">
							<template #default="scope">
								<el-button icon="ele-Edit" size="small" text type="primary"   @click="openUploadDialog(4)" > 上传远景图片 </el-button>
								<el-image
										v-if="state.yjimagesrc"
										style="width: 60px; height: 60px"
										:src="state.yjimagesrc"
										alt="无法预览"
										:lazy="true"
										:hide-on-click-modal="true"
										:preview-src-list="[state.yjimagesrc]"
										:initial-index="0"
										fit="scale-down"
										preview-teleported
								>
									<template #error> </template>
								</el-image>
							</template>
						</el-form-item>

					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="" prop="nkimage">
							<template #default="scope">
								<el-button icon="ele-Edit" size="small" text type="primary"   @click="openUploadDialog(5)" > 上传内窥图片 </el-button>
								<el-image
										v-if="state.nkimagesrc"
										style="width: 60px; height: 60px"
										:src="state.nkimagesrc"
										alt="无法预览"
										:lazy="true"
										:hide-on-click-modal="true"
										:preview-src-list="[state.nkimagesrc]"
										:initial-index="0"
										fit="scale-down"
										preview-teleported
								>
									<template #error> </template>
								</el-image>
							</template>
						</el-form-item>

					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="" prop="dtimage">
							<template #default="scope">
								<el-button icon="ele-Edit" size="small" text type="primary"   @click="openUploadDialog(6)" > 上传地图位置 </el-button>
								<el-image
										v-if="state.dtimagesrc"
										style="width: 60px; height: 60px"
										:src="state.dtimagesrc"
										alt="无法预览"
										:lazy="true"
										:hide-on-click-modal="true"
										:preview-src-list="[state.dtimagesrc]"
										:initial-index="0"
										fit="scale-down"
										preview-teleported
								>
									<template #error> </template>
								</el-image>
							</template>
						</el-form-item>

					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="cancel">取 消</el-button>
					<el-button type="primary" @click="submit">确 定</el-button>
				</span>
			</template>
		</el-dialog>
		<el-dialog v-model="state.dialogUploadVisible" :lock-scroll="false" draggable width="400px">
			<template #header>
				<div style="color: #fff">
					<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-UploadFilled /> </el-icon>
					<span> 上传文件 </span>
				</div>
			</template>
			<div>
				<el-upload ref="uploadRef" drag :auto-upload="false" :limit="5" :file-list="state.fileList" action="" :on-change="handleChange" accept=".jpg,.png,.bmp,.gif,.txt,.pdf,.xlsx,.docx">
					<el-icon class="el-icon--upload">
						<ele-UploadFilled />
					</el-icon>
					<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
					<template #tip>
						<div class="el-upload__tip">请上传大小不超过 10MB 的文件</div>
					</template>
				</el-upload>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="state.dialogUploadVisible = false">取消</el-button>
					<el-button type="primary" @click="uploadFile">确定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<style scoped>
	:deep(.el-select),
	:deep(.el-input-number) {
		width: 100%;
	}
</style>
<script lang="ts" setup>
	import {ref, onMounted, reactive} from "vue";
	import { getDictDataItem as di, getDictDataList as dl } from '/@/utils/dict-utils';
	import { ElMessage } from "element-plus";
	import type { FormRules } from "element-plus";
	import { addRoaddisinfo, updateRoaddisinfo, detailRoaddisinfo } from "/@/api/main/roaddisinfo";
	import {SysFile, SysRegion} from "/@/api-services";
	import {uploadFilesPoject} from "/@/api/main/roaddisinfo";

	const state = reactive({
		loading: false,
		key:0,
		Pid : undefined,
		fileData: [] as Array<SysFile>,
		fileList: [] as any,
		fileName: '',
		dialogUploadVisible:false,
		leidaimage:'',
		leidaimagesrc:'',
		qpimge:'',
		qpimgesrc:'',
		xcimage:'',
		xcimagesrc:'',
		yjimage:'',
		yjimagesrc:'',
		nkimage:'',
		nkimagesrc:'',
		dtimage:'',
		dtimagesrc:'',

	});

	// 通过onChanne方法获得文件列表
	const handleChange = (file: any, fileList: []) => {
		state.fileList = fileList;
		console.log('实例',state)
	};
	// 打开上传页面
	const openUploadDialog = (key: any) => {
		state.fileList = [];
		console.log('上传类型',key)
		state.Pid=props.pid;
		state.key=key;
		state.dialogUploadVisible = true;
	};


	//父级传递来的参数
	var props = defineProps({
		title: {
			type: String,
			default: "",
		},
		pid: {
			type: String,
			required: true
		},
	});
	//父级传递来的函数，用于回调
	const emit = defineEmits(["reloadTable"]);
	const ruleFormRef = ref();
	const isShowDialog = ref(false);
	const ruleForm = ref<any>({});
	//自行添加其他规则
	const rules = ref<FormRules>({
	});

	// 上传
	const uploadFile = async () => {
		const params = new FormData();

		if (state.fileList.length >=1){
			for (let i = 0; i < state.fileList.length; i++) {
				state.fileList[i].pid = state.Pid;
				params.append('files', state.fileList[i].raw);
			}
			params.append('pid',state.Pid);
			params.append('key',state.key);
			const fileInfoResponse	= await uploadFilesPoject(params);
			console.log('Saving with pid:', fileInfoResponse);
			console.log('img id', fileInfoResponse.data.result[0].id);
			console.log('img url', fileInfoResponse.data.result[0].url);

			handleFileInfoResponse(fileInfoResponse);
		}
		state.key=0;
		state.Pid=0;
		state.dialogUploadVisible = false;
	};



	const handleFileInfoResponse = (fileInfoResponse) => {
		// 根据 key 值进行判断和赋值
		console.log('key', state.key);

		switch (state.key) {
			case 1:
				state.leidaimage = fileInfoResponse.data.result[0].id;
				state.leidaimagesrc = fileInfoResponse.data.result[0].url;
				console.log('img leidaimagesrc', state.leidaimagesrc );

				break;
			case 2:
				state.qpimge = fileInfoResponse.data.result[0].id;
				state.qpimgesrc = fileInfoResponse.data.result[0].url;

				break;
			case 3:
				state.xcimage = fileInfoResponse.data.result[0].id;
				state.xcimagesrc = fileInfoResponse.data.result[0].url;

				break;
			case 4:
				state.yjimage = fileInfoResponse.data.result[0].id;
				state.yjimagesrc = fileInfoResponse.data.result[0].url;

				break;
			case 5:
				state.nkimage = fileInfoResponse.data.result[0].id;
				state.nkimagesrc = fileInfoResponse.data.result[0].url;
				break;
			case 6:
				state.dtimage = fileInfoResponse.data.result[0].id;
				state.dtimagesrc = fileInfoResponse.data.result[0].url;

				break;
			default:
				break;
		}
	};

	// 打开弹窗
	const openDialog = async (row: any) => {
		console.log('Saving with pid:', props.pid);
		// ruleForm.value = JSON.parse(JSON.stringify(row));
		// 改用detail获取最新数据来编辑
		let rowData = JSON.parse(JSON.stringify(row));
		if (rowData.id){
			ruleForm.value = (await detailRoaddisinfo(rowData.id)).data.result;
			console.log('查看返回值', ruleForm.value );

			state.leidaimage = ruleForm.value.leidaimage;
			state.leidaimagesrc = ruleForm.value.leidaimagesrc;
			console.log('img leidaimagesrc', state.leidaimagesrc );
			state.qpimge = ruleForm.value.qpimge;
			state.qpimgesrc = ruleForm.value.qpimgesrc;
			state.xcimage = ruleForm.value.xcimage;
			state.xcimagesrc = ruleForm.value.xcimagesrc;
			state.yjimage = ruleForm.value.yjimage;
			state.yjimagesrc = ruleForm.value.yjimagesrc;
			state.nkimage = ruleForm.value.nkimage;
			state.nkimagesrc = ruleForm.value.nkimagesrc;
			state.dtimage = ruleForm.value.dtimage;
			state.dtimagesrc = ruleForm.value.dtimagesrc;
		}

		else{
			ruleForm.value = rowData;
		}


		isShowDialog.value = true;
	};

	// 关闭弹窗
	const closeDialog = () => {
		emit("reloadTable");
		isShowDialog.value = false;
	};

	// 取消
	const cancel = () => {
		isShowDialog.value = false;
	};

	// 提交
	const submit = async () => {
		ruleFormRef.value.validate(async (isValid: boolean, fields?: any) => {
			if (isValid) {
				let values = ruleForm.value;
				values.pid = props.pid;
				values.leidaimage = state.leidaimage;
				values.qpimge = state.qpimge;
				values.xcimage = state.xcimage;
				values.yjimage = state.yjimage;
				values.nkimage = state.nkimage;
				values.dtimage = state.dtimage;
				values.leidaimagesrc = state.leidaimagesrc;
				values.qpimgesrc = state.qpimgesrc;
				values.xcimagesrc = state.xcimagesrc;
				values.yjimagesrc = state.yjimagesrc;
				values.nkimagesrc = state.nkimagesrc;
				values.dtimagesrc = state.dtimagesrc;
				if (ruleForm.value.id == undefined || ruleForm.value.id == null || ruleForm.value.id == "" || ruleForm.value.id == 0) {
					await addRoaddisinfo(values);
				} else {
					await updateRoaddisinfo(values);
				}
				closeDialog();
			} else {
				ElMessage({
					message: `表单有${Object.keys(fields).length}处验证失败，请修改后再提交`,
					type: "error",
				});
			}
		});
	};


	// 页面加载时
	onMounted(async () => {
	});



	//将属性或者函数暴露给父组件
	defineExpose({ openDialog });
</script>




